<template>
  <f7-page tabs :page-content="false">
  <f7-toolbar :tabbar="false" labels bottom>
    <f7-link tab-link="#tab-1" @click="tabClick(1)" :tab-link-active="tabOne" text="首页" icon-ios="f7:home"
             icon-md="material:home"></f7-link>
    <f7-link tab-link="#tab-2" @click="tabClick(2)" :tab-link-active="tabTwo" text="找谁" icon-ios="f7:message"
             icon-md="material:message"></f7-link>
    <f7-link icon-badge="5" @click="tabClick(3)" badge-color="red" tab-link="#tab-3" text="去哪" icon-ios="f7:timer"
             icon-md="material:timer"></f7-link>
    <f7-link @click="tabClick(4)" tab-link="#tab-4" text="我的" icon-ios="f7:person" icon-md="material:person"></f7-link>
  </f7-toolbar>
  </f7-page>
</template>

<script>
  import routes from '../routes.js'

  export default {
    data() {
      return {
        // Framework7 parameters here
        f7params: {
          // App routes
          routes: routes,
        },
        tabOne: true,
        tabTwo: false,
        isBottom: true,

        methods: {
          tabClick(e) {
            console.log(e);
            if (e === 1) {
              this.tabOne = true;
              this.tabTwo = false;
            } else {
              this.tabOne = false;
              this.tabTwo = true;
            }
            console.log("点击");
          }

        }
      }
    }
  }
</script>

<style scoped>

</style>
